<template>
  <div :style="{ margin: '0 10%' }">
    <!-- 添加大标题 -->
    <h1 style="text-align: center; font-weight: bold;">渤海银行沈阳分行客户KYC信息登记卡</h1>
    <!-- 添加小标题 -->
    <h3 style="text-align: center;">联络情况记录</h3>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="106px"
             label-position="left">
      <el-form-item label="日期" prop="date">
        <el-date-picker v-model="formData.date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                        :style="{width: '100%'}" placeholder="请选择日期" clearable></el-date-picker>
      </el-form-item>
      <el-form-item label="联络方式" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入联络方式" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="客情状态" prop="contactStatus">
        <el-radio-group v-model="formData.contactStatus" size="medium">
          <el-radio v-for="(item, index) in contactStatusOptions" :key="index" :label="item.value"
                    :disabled="item.disabled">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="推荐内容" prop="recommend">
        <el-input v-model="formData.recommend" placeholder="请输入推荐内容" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="效果反馈" prop="result">
        <el-input v-model="formData.result" placeholder="请输入效果反馈" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-row gutter="15">
        <el-col :span="8">
          <el-form-item label="跟进日期" prop="followDate">
            <el-date-picker v-model="formData.followDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '100%'}" placeholder="请选择跟进日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="跟进方式" prop="followWay">
            <el-input v-model="formData.followWay" placeholder="请输入跟进方式" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="意向产品/服务" prop="followIntention">
            <el-input v-model="formData.followIntention" placeholder="请输入意向产品/服务" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="contactRemark">
        <el-input v-model="formData.contactRemark" placeholder="请输入备注" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item size="large" style="text-align: center;">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
// import { addUserInfo } from "@/api/kycinfo/userinfo";




export default {
  name:'fivepage',
  components: {},
  props: [],
  data() {
    return {
      formData: {
        date: null,
        phone: undefined,
        contactStatus: undefined,
        recommend: undefined,
        result: undefined,
        followDate: null,
        followWay: undefined,
        followIntention: undefined,
        contactRemark: undefined,
      },
      rules: {
        date: [],
        phone: [],
        contactStatus: [],
        recommend: [],
        result: [],
        followDate: [],
        followWay: [],
        followIntention: [],
        contactRemark: [],
      },
      contactStatusOptions: [{
        "label": "重要熟悉",
        "value": 1
      }, {
        "label": "重要不熟悉",
        "value": 2
      }, {
        "label": "熟悉不重要",
        "value": 3
      }, {
        "label": "不熟悉不重要",
        "value": 4
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
  this.$refs['elForm'].validate(valid => {
    if (!valid) return;

    addUserInfo(this.formData)
      .then(response => {
        this.$message.success("提交成功!"); // 显示成功的提示
      })
      .catch(error => {
        this.$message.error("提交失败!"); // 显示失败的提示
      });
  });
},
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>

